<template>
  <div>
    <Card style="min-height: 300px;">
      <div id="column2" style="height: 280px;width: 100%"></div>
    </Card>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import * as echarts from 'echarts'
import Card from '../card.vue'
const index = ref(1)
var scale = 1;
var singleData = [224, 220, 335];
var multipleData = [442, 440, 220];
var judgeData = [110, 220, 115];
var color = "#189cbb";
var option = {
  tooltip: {
    show: false,
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['电极片状态', '电池状态', '质保状态'],
    align: 'left',
    itemGap: 50,
    // x: 'right',
    right: '10%',
    top:'0%',
    y: '10%',
    icon: 'rect',
    itemWidth: 15 * scale, // 图例图形宽度
    itemHeight: 15 * scale, // 图例图形高度
    textStyle: {
      color: "#3fdaff",
      fontSize: 12 
    }
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: ['>=1年', '1年', '<=1月','已过期','未知'],
    axisLabel: {
      // inside: true,
      padding: [15, 0, 0, 0],
      textStyle: {
        color: "#fff",
        fontSize: 12,
      }
    },
    axisTick: {
      inside: true,
      length: 8 * scale,
      lineStyle: {
        color: color,
      }
    },
    axisLine: {
      lineStyle: {
        color: color,
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(80,224,255,0.3)',
        type: 'dashed'
      }
    }
  }],
  yAxis: [{
    type: 'value',
    max: 600,
    axisLabel: {
      // inside: true,
      padding: [0, 15, 0, 0],
      textStyle: {
        color: color,
        fontSize: 16 * scale,
      }
    },
    axisTick: {
      lineStyle: {
        color: color,
      }
    },
    axisLine: {
      lineStyle: {
        color: color,
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(80,224,255,0.3)',
        type: 'dashed'
      },
      show: false,
    },
    name: '',
    nameTextStyle: {
      color: "#fff",
      fontSize: 16 * scale,
      padding: [0, 0, 10, 0]
    }
  }],
  series: [{
    name: '电极片状态',
    type: 'bar',
    stack: '电极片状态',
    barWidth: '5%',
    barGap: '40%',
    label: {
      normal: {
        show: true,
        position: "top",
        distance: 20 * scale,
        formatter: function (params) {
          return params.data.value;
        },
        textStyle: {
          color: "#ffc72b",
          fontSize: 20 * scale
        }
      }
    },
    itemStyle: {
      normal: {
        color: 'rgba(94,218,255,0.4)',
      }
    },
    data: singleData
  },
  {
    name: '电极片状态',
    type: 'bar',
    stack: '电极片状态',
    barWidth: '5%',
    barGap: '40%',
    itemStyle: {
      normal: {
        color: '#83e0fc',
      }
    },
    data: [2 * scale, 2 * scale, 2 * scale]
  }, {
    name: '电池状态',
    type: 'bar',
    stack: '电池状态',
    barWidth: '5%',
    barGap: '40%',
    label: {
      normal: {
        show: true,
        position: "top",
        distance: 20 * scale,
        formatter: function (params) {
          return params.data.value;
        },
        textStyle: {
          color: "#ffc72b",
          fontSize: 20 * scale
        }
      }
    },
    itemStyle: {
      normal: {
        color: 'rgba(20,124,146,0.4)',
      }
    },
    data: multipleData
  },
  {
    name: '电池状态',
    type: 'bar',
    stack: '电池状态',
    barWidth: '5%',
    barGap: '40%',
    itemStyle: {
      normal: {
        color: '#23aecb',
      }
    },
    data: [2 * scale, 2 * scale, 2 * scale]
  }, {
    name: '质保状态',
    type: 'bar',
    stack: '质保状态',
    barWidth: '5%',
    barGap: '40%',
    label: {
      normal: {
        show: true,
        position: "top",
        distance: 20 * scale,
        formatter: function (params) {
          return params.data.value;
        },
        textStyle: {
          color: "#ffc72b",
          fontSize: 20 * scale
        }
      }
    },
    itemStyle: {
      normal: {
        color: 'rgba(9,149,124,0.4)',
      }
    },
    data: judgeData
  },
  {
    name: '质保状态',
    type: 'bar',
    stack: '质保状态',
    barWidth: '10%',
    barGap: '40%',
    itemStyle: {
      normal: {
        color: '#10c8a7',
      }
    },
    data: [2 * scale, 2 * scale, 2 * scale]
  },]
};
function numb() {
  const myChart = echarts.init(document.getElementById('column2'))
  myChart.setOption(option, true)
}
onMounted(() => {
  numb()
})
</script>

<style scoped lang="css" >
.btn {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.active {
  padding: 5px;
  background: linear-gradient(135deg, #117fd7, #07e0fa);
  text-align: center;
  line-height: 1;
  border-radius: 5px;
}
</style>